<template>
  <div class="all">
     <div class="top clear-fix">
        <div class="left">
          <span>{{mechanismList.mechanismName}}</span>
          <img src="../assets/我的，更多@3x.png" alt="">
        </div>
       
        <div class="right" style="color:#00d8c9" v-if="supportDetail.activityEnlistType==0">众筹成功</div>
        <div class="right" style="color:#f93a3a" v-else-if="supportDetail.activityEnlistType==3">众筹失败</div>
        <div class="right" style="color:#ff9100" v-else>众筹中</div>
     </div>
     
    <div class="middle" @click="activityDetails">
         <div class="left">
           <img :src="detailsList.activityImage" alt="">
         </div>
        <div class="right">
          <p class="title" v-html="detailsList.activityName"></p>
          <p class="time">时间：{{detailsList.activityEndTime | fmtDate}}</p>
          <p class="site">地点：{{detailsList.activityAddress}}</p>
        </div>
    </div>
  <!-- 众筹成功的状态 -->
    <div class="monney" v-if="supportDetail.activityEnlistType==0">
       <div class="one clear-fix">
          <div class="left">
          <span>活动费用:</span>
        </div>
        <div class="right">￥{{detailsList.money}}</div>
       </div>

       <div class="two clear-fix">
          <div class="left">
          <span>已众筹金额 :</span>
        </div>
        <div class="right">￥{{supportDetail.nowMoney}}</div>      
       </div>
     
       <div class="status">
          <p class="picture"><img src="../assets/图标@3x.png" alt=""></p>
          <p class="first">恭喜您，众筹已成功</p>
          <p class="second">请留意活动时间、活动地点等信息！</p>
       </div>
    </div>

<!-- 众筹失败的状态 -->
    <div class="monney" v-else-if="supportDetail.activityEnlistType==3">
       <div class="one clear-fix">
          <div class="left">
          <span>活动费用 :</span>
        </div>
        <div class="right">￥{{detailsList.money}}</div>
       </div>

       <div class="two clear-fix">
          <div class="left">
          <span>已众筹金额 :</span>
        </div>
        <div class="right">￥{{supportDetail.nowMoney}}</div>
       </div>
     
       <div class="status">
          <p class="picture"><img src="../assets/图标失败@3x.png" alt=""></p>
          <p class="first">众筹未成功</p>
          <p class="second">我们将众筹的金额原路还返给您的支持者！</p>
       </div>
    </div>

<!-- 众筹中的状态 -->
     <div class="money-message" v-else>
      <div class="raise clear-fix">
            <div>
                <span>已筹：</span>
                <span>￥</span>
                <span>{{supportDetail.nowMoney==undefined?'0':parseInt(supportDetail.nowMoney)}}</span>
                <span v-if="(''+supportDetail.nowMoney).split('.')[1] != undefined">.{{(''+supportDetail.nowMoney).split('.')[1] || ''}}</span>
            </div>
            <div>
                <span>完成</span>
                <span>{{supportDetail.nowMoney==undefined?'100%':Math.floor((supportDetail.nowMoney/supportDetail.allMoney*100))+'%' || 0}}</span>
            </div>
        </div>
        <div class="progress-bar">
            <div></div>
        </div>
        <div class="active-message">
            <div>
                <span>￥{{supportDetail.allMoney || 0}}</span>
                <span>目标金额</span>
            </div>
            <div>
                <span>{{utils.parseTime(detailsList.restrictTime - new Date().getTime())}}</span>
                <span>剩余时间</span>
            </div>
            <div>
                <span>{{supportList.length || 0}}次</span>
                <span>支持次数</span>
            </div>
        </div>
        <share class="stare-style" :stareId="activityId[1]"></share>
    </div>
    <comment :supportList="supportDetail.list" :identification="activeListId"></comment>
  </div>
</template>



<script>
import comment from './sub_comonents/comment'
import share from './sub_comonents/stare'
export default {
    data() {
        return {
            detailsList: {},
            activityId: [],
            supportDetail: {},
            chipsDetails: {}, //活动数据
            mechanismList: {},//机构数据
            activeListId: [],
            supportList: []
        }
    },
    created() {
        this.activityId = this.$route.params.openId.split(',')
        this.activeListId = [
            this.utils.cookie('get', 'user').userId,
            this.activityId[1]
        ]
    },
    methods: {
        activityDetails() {
            this.$router.push({
                path:
                    '/support_details/' +
                    this.utils.cookie('get', 'user').userId +
                    ',' +
                    this.activityId[1]
            })
        }
    },
    mounted() {
        // 获取活动详情
        this.utils.$get(
            this.utils.GET_CHIPS_DETAILS,
            data => {
                this.detailsList = data.data
                this.mechanismList = data.data.mechanismModel
            },
            {
                id: this.activityId[1]
            }
        )
        // 获取支持详情
        this.utils.$get(
            this.utils.GET_SUPPOIRT_DETAILS,
            data => {
                this.supportDetail = data.data || {}
                this.supportList = this.supportDetail.list

                document.querySelector('.progress-bar div').style.width =
                    Math.floor(
                        this.supportDetail.nowMoney /
                            this.supportDetail.allMoney *
                            100
                    ) + '%'
            },
            {
                activityId: this.activityId[1],
                userId: this.utils.cookie('get', 'user').userId
            }
        )
    },
    components: {
        comment,
        share
    }
}
</script>


<style lang="less">
.all {
    width: 100%;
    .top {
        width: 100%;
        height: 0.8rem;
        border-bottom: 0.01rem solid lightgray;
        clear: both;
        .left {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            width: 5rem;
            padding: 0;
            -webkit-box-orient: vertical;
            margin-left: 0.2rem;
            float: left;
            > span {
                font-size: 0.28rem;
                color: #333333;
                line-height: 0.8rem;
            }
            > img {
                padding-left: 0.16rem;
                width: 0.13rem;
                height: 0.16rem;
                vertical-align: middle;
            }
        }
        .right {
            float: right;
            font-size: 0.28rem;
            line-height: 0.8rem;
            color: #00d8c9;
            margin-right: 0.24rem;
        }
    }
    .middle {
        height: 2.8rem;
        width: 100%;
        border-bottom: 0.01rem solid lightgray;
        display: table;

        .left {
            padding-left: 0.2rem;
            display: table-cell;
            vertical-align: middle;
            width: 3rem;
            height: 1.8rem;
            > img {
                width: 100%;
                height: 100%;
                vertical-align: middle;
            }
        }
        .right {
            padding-left: 0.2rem;
            // margin-top: .32rem;
            display: table-cell;
            vertical-align: middle;
            height: 100%;
            .title {
                font-size: 0.32rem;
                color: #333333;
                padding-bottom: 0.24rem;
                overflow: hidden;
            }
            .time {
                font-size: 0.24rem;
                color: #999999;
                padding-bottom: 0.24rem;
            }
            .site {
                font-size: 0.24rem;
                color: #999999;
                text-indent: -3em;
                margin-left: 3em;
            }
        }
    }
    // 众筹成功和失败
    .monney {
        .status {
            width: 100%;
            height: 5rem;
            .picture {
                margin-top: 0.4rem;
                text-align: center;
                > img {
                    width: 2.48rem;
                    height: 2.11rem;
                }
            }
            .first {
                font-size: 0.32rem;
                color: #333333;
                margin-top: 0.4rem;
                text-align: center;
            }
            .second {
                font-size: 0.32rem;
                color: #333333;
                margin-top: 0.15rem;
                text-align: center;
            }
        }
        .one {
            width: 100%;
            height: 0.8rem;
            border-bottom: 0.1px solid lightgray;
            clear: both;
            .left {
                margin-left: 0.2rem;
                float: left;
                > span {
                    font-size: 0.28rem;
                    color: #999999;
                    line-height: 0.8rem;
                }
            }
            .right {
                float: right;
                font-size: 0.28rem;
                line-height: 0.8rem;
                color: #00d8c9;
                margin-right: 0.24rem;
            }
        }
        .two {
            width: 100%;
            height: 0.8rem;
            border-bottom: 1px solid lightgray;
            clear: both;
            .left {
                margin-left: 0.2rem;
                float: left;
                > span {
                    font-size: 0.28rem;
                    color: #999999;
                    line-height: 0.8rem;
                }
            }
            .right {
                float: right;
                font-size: 0.28rem;
                line-height: 0.8rem;
                color: #00d8c9;
                margin-right: 0.24rem;
            }
        }
    }
    // 众筹状态中
    .money-message {
        padding: 0 0.26rem;
        height: 5.54rem;
        .raise {
            padding: 0.4rem 0;
            > div {
                &:first-child {
                    float: left;
                    > span {
                        &:nth-child(1) {
                            color: #999;
                            font-size: 0.28rem;
                        }
                        &:nth-child(2) {
                            color: #f93a3a;
                            font-size: 0.24rem;
                        }
                        &:nth-child(3) {
                            color: #f93a3a;
                            font-weight: 600;
                            font-size: 0.36rem;
                        }
                        &:nth-child(4) {
                            color: #f93a3a;
                            font-size: 0.3rem;
                            font-weight: 600;
                        }
                    }
                }
                &:last-child {
                    float: right;
                    > span {
                        &:nth-child(1) {
                            color: #333;
                            font-size: 0.28rem;
                        }
                        &:nth-child(2) {
                            color: #00d8c9;
                            font-size: 0.28rem;
                        }
                    }
                }
            }
        }
        .progress-bar {
            width: 100%;
            background-color: #e5e5e5;
            height: 0.16rem;
            border-radius: 0.08rem;
            > div {
                width: 100%;
                height: 100%;
                background: linear-gradient(to right, #44e9d7, #00d8c9);
                border-radius: 0.08rem;
            }
        }
        .active-message {
            margin: 0.4rem 0;
            padding: 0.4rem 0;
            background-color: #f9f9f9;
            height: 1.6rem;
            > div {
                float: left;
                width: 33.33%;
                border-right: 1px solid #e5e5e5;
                > span {
                    width: 100%;
                    display: block;
                    text-align: center;
                    &:last-child {
                        margin-top: 0.2rem;
                    }
                }
                &:last-child {
                    border: none;
                }
            }
        }
    }

    // 分享
    .stare-style {
        width: 100%;
        background-color: #f5f5f5;
    }
}
</style>
                                                                         
